<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            margin:50px auto;
        }
        th{
            width: 120px;
            height: 25px;
            border: 1px solid red;
        }
        td{
            text-align: center;
            width:  120px;
            height: 25px;
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <div class="box">
        <form action="" id=form>
            <table>
                <thead>
                    <tr>
                        <th><input class="cks" type="checkbox" id="checkall">选中全部</th>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>库存</th>
                        <th>合计</th>
                    </tr>

                </thead>
                <tbody>
                    <!-- <tr shoppingId="">
                        <td><input type="checkbox"  id="chk">点我</td>
                        <td >商品1</td>
                        <td >10</td>
                        <td>想要 <input type="number" min="0" max="999" placeholder="0" ></td>
                        <td ></td>
                        <td ></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox">点我</td>
                        <td>商品2</td>
                        <td>20</td>
                        <td>想要 <input type="number" min="0" max="999" placeholder="0"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox">点我</td>
                        <td>商品3</td>
                        <td>30</td>
                        <td>想要 <input type="number" min="0" max="999" placeholder="0"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox">点我</td>
                        <td>商品4</td>
                        <td>40</td>
                        <td>想要 <input type="number" min="0" max="999" placeholder="0"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr> -->
                    <tr id="all">
                        <td>总价</td>
                        <td colspan="4">总价和 : 0</td>
                        <td><input id="btn" type="button" value="购买"></td>
                    </tr>
                </tbody>
                
            </table>

        </form>
    </div>
    <script src="./jquery/jquery.min.js"></script>
    <script>
        $(function(){
        
            //循环遍历生成列表
           
            $.ajax({
                type:'post',
                url:'./addshop.php',
                dataType:'json',
                data:{},
                success:function(res){
                //   console.log(res);
                var data=res.data;
                $.each(data,function(index,val){
                    var str='<tr shoppingid="'+val.id+'">\
                        <td><input type="checkbox" class="cks">点我</td>\
                        <td >'+val.goods+'</td>\
                        <td >'+val.price+'</td>\
                        <td>想要 : <input class="num" type="number" min="0" max="'+val.num+'" value="0" ></td>\
                        <td >剩余'+(val.num)+'份</td>\
                        <td class="allprice">0</td>\
                        </tr>';
                        $("#all").before($(str));
                })
                    
                }
            })
     //计算总价
            $('tbody').on('input','.num',function(){
                // console.log(123);
                //最大值 和服务器端同步
                var allnum=parseInt($(this).prop("max"));
                //当前输入的值
                var num=parseInt($(this).val());
    
                
    //判断当输入的数量超过最大库存时 将值改为最大库存
                if (num>allnum) {
                   num=allnum;
                //console.log(num);
                   $(this).parents("tr").children().eq(3).children('input').val(allnum);
                }

    //判断输入的是否数字
                var value=/^[0-9]*$/;
                if (!value.test(num)) {
                    $(this).parents("tr").children().eq(3).children('input').val(0);
                    num=0;
                }

                //后面的单品总价
                var price=$(this).parents("tr").children().eq(2).text();
                //取得剩余库存
                // console.log(num);
                
                var lastnum=allnum-num;
                // console.log(lastnum);
                
                //取得单价乘以数量 
                var allprice=price*num;
                
                $(this).parents("tr").children().eq(5).text(allprice);
                $(this).parents("tr").children().eq(4).text("剩余"+lastnum+"份");
                // console.log(allprice);   
                // var aaa=$(this).parents('tr').children().eq(0).children().prop('checked')
                // console.log(aaa);


//判断输入数量时的选框状态是否为选中
                if ($(this).parents('tr').children().eq(0).children().prop('checked')) {
                    // console.log("aaaaaaaaaaa");
                    //写总价
                    var id=0;
           
                     var ckss=$('tbody .cks:checked')
                     $.each(ckss,function(index,val){
                    id=id+parseInt($(val).parents('tr').children().eq(5).text());
       
                    })
                    // console.log(id);
                    $('#all').children().eq(1).text("总价和 : "+id);

                }                                    
            })

        //多选全选
        $('thead input').on('change',function(){
//             // console.log(123);
            var status=$(this).prop('checked');
            $('tbody tr .cks').prop('checked',status);      
// //             //如果全选显示总价和
//             if (status) {
// // 新建一个变量接收总价和
//                 //获取全部的列  取得最后的总价
//                 var all=document.querySelectorAll(".allprice");
//                 var allprice=0;
//                     for(var i=0;i<all.length;i++){
//                         allprice=allprice+ parseInt(all[i].innerText);   
//                         // console.log(allprice);
    
//                     }
//                 $('#all').children().eq(1).text("总价和 : "+allprice)
//             }  
           
            // console.log(all);
            //此处
            var id=0;
           
           var ckss=$('tbody .cks:checked')
           $.each(ckss,function(index,val){
       id=id+parseInt($(val).parents('tr').children().eq(5).text());
       
           })
           // console.log(id);
           $('#all').children().eq(1).text("总价和 : "+id);
          
            })
        })
        //单选计算总价和
        $('tbody').on('click','.cks',function(){
            var id=0;
           
            var ckss=$('tbody .cks:checked')
            $.each(ckss,function(index,val){
        id=id+parseInt($(val).parents('tr').children().eq(5).text());
        
            })
            // console.log(id);
            $('#all').children().eq(1).text("总价和 : "+id);
        })

        //提交减库存
        $('#btn').on('click',function(){
            // console.log(123);
            //获取当前的购买量
            var ckss=$('tbody .cks:checked');
            // console.log(ckss);
           //新建数组接收
           var dataid=[];
           var datanums=[];
            $.each(ckss,function(index,val){
            //获取选中的id值
            var id=$(val).parents('tr').attr("shoppingid")
            //获取选中的购买数
            var nums=$(val).parents('tr').find('.num').val();
            var lastnums=$(val).parents('tr').find('.num').prop('max')-nums;
            // console.log(nums); 
            // console.log(id);
            dataid.push(id);
            datanums.push(lastnums);
            })
            // console.log(data);
            $.ajax({
                url:'getshop.php',
                type:'post',
                dataType:'json',
                data:{
                    dataid:dataid,
                    datanum:datanums
                },
                success:function(res){
                //    console.log(res);
                if (res.code==1) {
                alert("点餐成功!")
                window.location.reload();        
                }              
                }
            })
            
            
        })
        
    </script>
</body>

</html>